<template>
    <a href="/ds1"><h1>ds1 seriesLayoutBy</h1></a>
    <a href="/ds2"><h1>ds1 encode修改轴</h1></a>
    <a href="/ds3"><h1>ds1 encode</h1></a>
    <div id="main"></div>
</template>
<script>
import *  as  echarts from 'echarts'


export default {
name: 'dataset',
mounted() {
    let myecharts = document.getElementById('main')
    let myChart = echarts.init(document.getElementById('main'),null,{
        width: 1000,
        height: 600
    })
    // x轴式销售时间，y轴式销售金额
    // 定义option
    let option = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'time',
            name: '销售时间',
            data: ['2023-07-01', '2023-07-02', '2023-07-03', '2023-07-04', '2023-07-05', '2023-07-06', '2023-07-07', '2023-07-08', '2023-07-09'],
            axisLabel: {
                formatter: function (value) {
                    let  n = new Date(value)

                    return n.getFullYear() + '年' + (n.getMonth() + 1) + '月' + n.getDate() + '日'
                },
                rotate: 15
            },
            axisLine: {
                symbol: ['none', 'arrow'],
                lineStyle: {
                    type: 'dotted'
                    // ...
                }
            },
            axisTick: {
                length: 26,
                lineStyle: {
                    type: 'dashed'
                    // ...
                }
            }
        },
        dataZoom: [
            {
                type: 'slider',
                start: 0,
                end: 100
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '销售金额'
            },
            {
                type: 'value',
                name: '销售数量'
            },
            
        ],

        tooltip: {},
        dataset: {
            dimensions: ['销售时间', '销售金额','销售数量'],
            source: [
                ['2023-07-01', 1200, 100],
                ['2023-07-02', 1200, 200],
                ['2023-07-03', 1100, 100],
                ['2023-07-04', 1300, 300],
                ['2023-07-05', 750, 150],
                ['2023-07-06', 280, 80],
                ['2023-07-07', 300, 200],
                ['2023-07-08', 1100, 100],
                ['2023-07-09', 1300, 300]
            ]   
        },
        series: [{
            type: 'line',
            encode: {
                x: '销售时间',
                y: '销售金额'
            }
        },
        {
            type: 'line',
            encode: {
                x: '销售时间',
                y: '销售数量'
            }
        }
    ]
       
    }    
    myChart.setOption(option)   
}
}
</script>
<style scoped>

</style>